<template>
  <div class="picture-wall">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">{{ title }}</span>
    </div>
    <RefreshList :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <div v-for="(pics, index) in images" :key="index">
          <left-pics :pics="pics" v-if="index % 2 !== 0" @preview-pic="previewPics"></left-pics>
          <right-pics :pics="pics" v-else @preview-pic="previewPics"></right-pics>
        </div>
      </template>
    </RefreshList>
  </div>
</template>

<script>
import LeftPics from '@/components/posts/LeftPics.vue'
import RefreshList from '@/components/activity/public-component/RefreshList.vue'
import RightPics from '@/components/posts/RightPics.vue'
import { preview } from '@/utils/preview'
import axios from '@/utils/request'
import { bus } from '@/utils/bus/bus'
export default {
  props: ['id'],
  components: {
    LeftPics,
    RightPics,
    RefreshList
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      page: 1,
      num: 0,
      pics: [],
      images: [],
      title: ''
    }
  },
  methods: {
    async requestPicsList() {
      /*
      请求地址：https://api.xmonster.cn/v2/businesses/135859029/posts
      请求方式：get
      请求参数：
      params：{
        page：1
        sort_by：time
        is_selected:1
        type:all
        limit:20
      }
      */
      const data = await axios.get(`/v2/businesses/${this.id}/posts`, {
        params: {
          page: this.page,
          sort_by: 'time',
          is_selected: 1,
          type: 'all',
          limit: 20
        }
      })
      if (data.length > 0) {
        let index = 0
        let pics = []
        data.forEach((item) => {
          item.pics.forEach((pic) => {
            if (index > 5) {
              index = 0
              this.images.push(pics)
              pics = []
            } else {
              pics.push({
                index: this.num,
                url: pic.url
              })
              index++
            }
            this.num++
            this.pics.push(pic.url)
          })
        })
        this.status.loading = false
        this.status.finished = false
        this.page++
      } else {
        this.status.finished = true
      }
    },
    // 预览图片
    previewPics(index) {
      preview(this.pics, index)
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.images = []
      this.pics = []
      this.num = 0
      await this.sendRequest()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestPicsList()
      this.status.loading = false
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      await this.requestPicsList()
      Toast.clear()
    }
  },

  created() {
    bus.$off('title')
    bus.$on('title', (val) => {
      this.title = val
    })
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.picture-wall {
  padding-top: 46px;
  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close {
      &.close {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        width: 30px;
        img {
          transform: rotate(180deg);
          height: 20px;
          width: 20px;
        }
      }
    }
  }
}
</style>
